﻿<!DOCTYPE html> 
<html lang="fr">
<head>
<title>drop canvas</title> 
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styledessin.css" type="text/css" />
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<script type="text/javascript"src='res/floue.js'></script>
<script type="text/javascript"src='res/tableau.js'></script>
<script type="text/javascript"src='res/emboss.js'></script>
<script type="text/javascript"> 

function paink(e){

	this.elem=document.getElementById('cvs');
	this.contpaink=document.getElementById('cvs').parentNode;
	this.contexte=document.getElementById('cvs').getContext('2d');
	this.gauche=0;
	this.haut=0;
	this.hauteur=document.getElementById('cvs').height;
	this.largeur=document.getElementById('cvs').width;
	this.tbdata= new  Array;
	this.refintermed=0;
	this.datatb=-1;
	this.decX;
	this.decY;
	this.cccpmem;
	this.taille=16;
}


function godrag(e){

	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var Obj =  e.currentTarget;
	outcadre()
	
	var X =e.clientX + dde.scrollLeft;
	var Y =e.clientY + dde.scrollTop;

	paink1.decX=X-Obj.offsetLeft;
	paink1.decY=Y-Obj.offsetTop;
	
	e.dataTransfer.setData('Text', Obj.src);
	e.dataTransfer.effectAllowed = 'copy';
	e.dataTransfer.dropEffect = 'move';
}


function Dragov(e) {

	e.preventDefault();
}

function drop(e) {

	if(e){
		e.preventDefault();
		var dde=(navigator.vendor) ? document.body : document.documentElement;
		var X =e.clientX + dde.scrollLeft;
		var Y =e.clientY + dde.scrollTop;

		if ( e.dataTransfer.files && e.dataTransfer.files.length > 0) {

			if (!e) {
				var fichier = document.getElementById('fileinput').files;
			}
			else {
				var fichier = e.dataTransfer.files;
			}
			if (fichier[0].type.match('image.*')) {
				
				var charge=new FileReader();
				charge.readAsDataURL(fichier[0]);
				
				charge.onloadend = function(e){
					var ctx = paink1.contexte;
					var ima=new Image();
					ima.src=e.target.result;
					ima.onload=function(){
						raz()
					paink1.elem.height=ima.height;
					paink1.elem.width=ima.width;
					paink1.contpaink.style.height=ima.height+"px";
					paink1.contpaink.style.width=ima.width+"px";
					paink1.largeur=ima.width;
					paink1.hauteur=ima.height;
					ctx.drawImage(ima, 0, 0);
					refanul();
					}
				}
			}
		}
		else {
			var draaag=e.dataTransfer.getData('Text');

			var imgz = new Image();
			imgz.src = draaag;
			
			imgz.onload = function(){
				var ctx = paink1.contexte;
				var dcx=X-paink1.decX-paink1.contpaink.offsetLeft;
				var dcy=Y-paink1.decY-paink1.contpaink.offsetTop;
				ctx.drawImage(imgz, dcx, dcy);
				refanul();
			}	
		}
	}
	
	else{
		
		var fichier = document.getElementById('fileinput').files;

		if (fichier[0].type.match('image.*')) {
			
			var charge=new FileReader();
			charge.readAsDataURL(fichier[0]);
			charge.onloadend = function(e){
				var ctx = paink1.contexte;
				var ima=new Image();
				ima.src=e.target.result;
				ima.onload=function(){
					raz()
					paink1.elem.height=ima.height;
					paink1.elem.width=ima.width;
					paink1.contpaink.style.height=ima.height+"px";
					paink1.contpaink.style.width=ima.width+"px";
					paink1.largeur=ima.width;
					paink1.hauteur=ima.height;
					ctx.drawImage(ima, 0, 0);
					refanul();
				}
			}
		}
	}
}


function sauver() {  
	var moncanvas = document.getElementById("cvs");  
	var base64 = moncanvas.toDataURL("image/png");  
	var gema = document.createElement("img");  
	gema.src = base64;
	var rb=document.createElement("br");
	document.body.appendChild(rb); 
	document.body.appendChild(gema);  
} 


function raz() {

	var ctx = paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur;
	ctx.clearRect(0,0,largeur,hauteur);
	for(var i=paink1.tbdata.length; i>0; i--){
		paink1.tbdata.pop();
	}
	paink1.datatb=-1;
}

function refanul(){

	if(paink1.datatb+1!=paink1.tbdata.length){
		var ret=paink1.tbdata.length-paink1.datatb-1;
		for(var i=ret; i>=1; i--){
			paink1.tbdata.pop();
		}
	}
	var largeur=paink1.elem.width;
	var hauteur=paink1.elem.height;
	var ctx=paink1.contexte;
	paink1.tbdata.push(ctx.getImageData(0,0,largeur,hauteur));
	paink1.datatb+=1;
	painkcentre();
}


function annuler(){

	var ctx=paink1.contexte;
	if(paink1.datatb>=0){
		paink1.datatb-=1;
		if(paink1.datatb==-1){
			var largeur=paink1.largeur;
			var hauteur=paink1.hauteur;
			ctx.clearRect(0,0,largeur,hauteur);
			painkcentre();
			return false;
		}
		
		paink1.elem.height=paink1.tbdata[paink1.datatb].height;
		paink1.elem.width=paink1.tbdata[paink1.datatb].width;
		paink1.contpaink.style.height=paink1.tbdata[paink1.datatb].height+'px';
		paink1.contpaink.style.width=paink1.tbdata[paink1.datatb].width+'px';
		paink1.largeur=paink1.tbdata[paink1.datatb].width;
		paink1.hauteur=paink1.tbdata[paink1.datatb].height;
		ctx.putImageData(paink1.tbdata[paink1.datatb],0,0);
		painkcentre();
		outcadre();
	}
}


function refaire(){

	if(paink1.datatb<paink1.tbdata.length-1){
		paink1.datatb+=1;
		paink1.elem.height=paink1.tbdata[paink1.datatb].height;
		paink1.elem.width=paink1.tbdata[paink1.datatb].width;
		paink1.contpaink.style.height=paink1.tbdata[paink1.datatb].height+'px';
		paink1.contpaink.style.width=paink1.tbdata[paink1.datatb].width+'px';
		paink1.contexte.putImageData(paink1.tbdata[paink1.datatb],0,0);
		painkcentre();
		outcadre();
	}
}

function painkcentre(){

	var ddl=(navigator.vendor) ? document.body : document.documentElement;
	paink1.contpaink.style.left=((document.documentElement.clientWidth-paink1.elem.width)/2)+ddl.scrollLeft+'px';
}

function outcadre(){

	if(document.getElementById("cadre")){
		paink1.contpaink.removeChild(document.getElementById("cadre"));
		paink1.largeur=paink1.elem.width;
		paink1.hauteur=paink1.elem.height;
		paink1.gauche=0;
		paink1.haut=0;
	}
}

function evcadre(e){

	e.preventDefault();
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	
	XX =e.clientX + dde.scrollLeft-paink1.contpaink.offsetLeft;
	YY =e.clientY + dde.scrollTop-paink1.contpaink.offsetTop;
	paink1.gauche=XX;
	paink1.haut=YY;
	
	if(document.getElementById("cadre")){
		document.getElementById("cadre").addEventListener("mousemove",evcadretaille, false);
		document.getElementById("cadre").addEventListener("mouseup",evcadrefin, false);
		evcadretaille(e);
		return false;
	}

	var cd=document.createElement('canvas');
	cd.setAttribute("id",'cadre');
	cd.height=paink1.hauteur;
	cd.width=paink1.largeur;
	cd.style.position='absolute';
	paink1.contpaink.appendChild(cd);
	cd.getContext("2d").strokeStyle = "rgba(100,160,255,0.4)";
	cd.getContext("2d").lineWidth=3;
	cd.addEventListener("mousemove",evcadretaille, false);
	cd.addEventListener("mousedown",evcadre, false);
	cd.addEventListener("mouseup",evcadrefin, false);
	evcadretaille(e)
}

function evcadretaille(e){
	
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var cd=document.getElementById('cadre').getContext("2d");
	
	cd.clearRect( 0, 0, paink1.elem.width, paink1.elem.height);
	
	var XXX=e.clientX + dde.scrollLeft-paink1.contpaink.offsetLeft;
	var YYY=e.clientY + dde.scrollTop+paink1.contpaink.offsetTop;

	cd.strokeRect( XX, YY,XXX-XX, YYY-YY);
	
	paink1.largeur=XXX-XX
	paink1.hauteur=YYY-YY
}

function evcadrefin(e){

	document.getElementById('cadre').removeEventListener("mousemove",evcadretaille, false);
	document.getElementById('cadre').removeEventListener("mouseup",evcadrefin, false);

	if(paink1.largeur<=20 && paink1.hauteur<=20){
		outcadre();
	}

}

function dispatche(outil){

	outcadre();
	var ctx = paink1.elem;

	if(outil=='pipette'){
		ctx.removeAttribute("onmousedown")
		ctx.setAttribute("onmousedown","pipette(event)");
	}
	
	if(outil=='cadre'){
		ctx.removeAttribute("onmousedown")
		ctx.setAttribute("onmousedown","evcadre(event)");
	}
	
	if(outil=='trait'){
		ctx.removeAttribute("onmousedown")
		ctx.setAttribute("onmousedown","evtrait(event)");
	}
	
	if(outil=='pot'){
		ctx.removeAttribute("onmousedown")
		ctx.setAttribute("onmousedown","pot(event)");
	}

	if(outil=='gomme'){
		ctx.removeAttribute("onmousedown")
		ctx.setAttribute("onmousedown","gomme(event)");
	}
	
}

//////////////////////////////
///////scroll barre//////////
////////////////////////////

var kscroll={

elem:null,
cible:null,

	ajoutevent:function(e,cause){
		paink1.cccpmem=paink1.contexte.getImageData(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);
		this.elem=e.currentTarget.childNodes[1]
		this.cible=cause;
		this.process(e);
		e.preventDefault();
		document.documentElement.addEventListener("mousemove", kscroll.process, false);
		document.documentElement.addEventListener("mouseup", kscroll.retireevent, false);
	},

	retireevent :function(){

		document.documentElement.removeEventListener("mousemove", kscroll.process, false);
		document.documentElement.removeEventListener("mouseup", kscroll.retireevent, false);
	},

	process :function(e) {
		
		var db=kscroll.elem;	  
		var ixe =e.clientX-db.parentNode.parentNode.offsetLeft-db.parentNode.offsetLeft;
		var taille=db.parentNode.offsetWidth-db.offsetWidth;
		var fac=ixe/taille;
		fac = fac>1 ? 1 : fac;
		fac = fac<0 ? 0 : fac;
		kscroll.gescroll(fac,taille);
		db.style.marginLeft=fac*taille+'px';
	},

	gescroll :function(fac,taille){

		if(kscroll.cible=='texte'){

			var valeur=fac*taille;
			paink1.taille=valeur+5
			chtxt()
		}

		else if(kscroll.cible=='rouge' || kscroll.cible=='vert' || kscroll.cible=='bleu'){
			var valeur=((fac*taille)-(taille*0.5))*2;
			coulplus(valeur,kscroll.cible);
		}
		
		else if(kscroll.cible=='prouge' || kscroll.cible=='pvert' || kscroll.cible=='pbleu'){
			var valeur=fac*taille;
			palette.palcoul(valeur)
		}

		else if(kscroll.cible=='lumiaire'){

			var valeur=((fac*taille)-(taille*0.5));
			lumiaire(valeur);
		}

		else if(kscroll.cible=='ombrex' || kscroll.cible=='ombrey'){

			var valeur=((fac*taille)-(taille*0.5));
			formombre(valeur);
		}

		else if(kscroll.cible=='ombref'){

			var valeur=(fac*taille);
			formombre(valeur);
		}
		
		else if(kscroll.cible=='pixi'){

			var valeur=fac*taille;
			pixeliser(Math.round(valeur/10));
		}

		else if(kscroll.cible=='floue'){

			var valeur=(fac*taille)/20;
						
			stackBlurImage(valeur);
		}
		
		else if(kscroll.cible=='bossautre' || kscroll.cible=="bossgris"){
					
			boss(fac,kscroll.cible);
		}
		else if(kscroll.cible=="dessin1" || kscroll.cible=="dessin2"){
					
			dessin(fac);
		}


	},
}


//////////////////////////////
///////drag drop/////////////
////////////////////////////

var kdrag={

elemdrag:null,
decx:null,
decy:null,
rar:true,
ttb:[],
	nb_de_fenetre:0,

sp:function(s){

		if(kdrag.rar && kdrag.elemdrag==null){
			
			if(arguments.length==1){
				kdrag.elemdrag=s.currentTarget;
			}
			else{
				kdrag.elemdrag=s.currentTarget.parentNode;
			}
			
			var dbe=(navigator.vendor) ? document.body : document.documentElement;

			kdrag.decx=s.clientX + dbe.scrollLeft - kdrag.elemdrag.offsetLeft;
			kdrag.decy=s.clientY + dbe.scrollTop - kdrag.elemdrag.offsetTop;

			s.preventDefault();
			document.documentElement.addEventListener("mousemove", kdrag.posi, false);
			document.documentElement.addEventListener("mouseup", kdrag.sp, false);

			kdrag.rar=false;
		}

		else if(kdrag.rar==false && kdrag.elemdrag!=null){
			document.documentElement.removeEventListener("mousemove", kdrag.posi, false);
			s.currentTarget.removeEventListener("mouseup", kdrag.sp, false);
			kdrag.elemdrag=null;
			kdrag.rar=true;
		}
	},

posi:function(s){

		var dde=(navigator.vendor) ? document.body : document.documentElement;

		var setX =s.clientX + dde.scrollLeft;
		var setY =s.clientY + dde.scrollTop;
		kdrag.elemdrag.style.left=(setX-kdrag.decx)+"px";
		kdrag.elemdrag.style.top=(setY-kdrag.decy)+"px";
	},
	
plans:function(e){   // fonction de gestion de position des fenetre au niveau du zindex//

		var pp=e.currentTarget;
		kdrag.ttb[(kdrag.nb_de_fenetre-1)]=pp;
		for(mul=parseInt(pp.style.zIndex)+1;mul<kdrag.nb_de_fenetre;mul++){
			kdrag.ttb[mul-1]=kdrag.ttb[mul];
			kdrag.ttb[mul].style.zIndex=(mul-1);
		}
	},
	
	init_drag:function(){

		var allElements = document.getElementsByClassName("cdrag");
		for (var i = 0; i< allElements.length; i++){
			kdrag.ttb.push(allElements[i].parentNode);
			allElements[i].parentNode.addEventListener("mousedown",kdrag.plans, false);
			allElements[i].parentNode.style.zIndex=i;
		}
		kdrag.ttb.push("ttfin");
		kdrag.nb_de_fenetre=kdrag.ttb.length;
	}
}
///////////////////////////////////////
//////////////////////////////////////




//////////////////////////////
/////palette de couleur//////
////////////////////////////

function selecte(ev){
	ev.preventDefault();
}

var palette={

palcoul:function(valeur){

		var tabcode=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

		var el2=tabcode[Math.floor((valeur)/16)];
		el=tabcode[Math.round(((valeur)%16))];
		el=el2+el;
		
		var ch=document.getElementById('leinput').value;

		switch (kscroll.cible){
		case "prouge": el=ch.substring(0,1)+el+ch.substring(3,7); break;
		case "pvert": el=ch.substring(0,3)+el+ch.substring(5,7); break;
		case "pbleu": el=ch.substring(0,5)+el; break;
		}
		palette.gesticoul(el);
	},

arcenmouse:function(e){

		dde=(navigator.vendor) ? document.body : document.documentElement;
		var lui=document.getElementById('arccoul');
		var j =Math.floor(e.clientX + dde.scrollLeft-lui.parentNode.parentNode.offsetLeft-lui.parentNode.offsetLeft);
		var el=document.getElementById('dv');

		if (j<=42){
			var i=Math.floor(6*j);
			el.style.backgroundColor='rgb(255,'+i+',0)';
		}
		else if (j<=85){
			var i=256-Math.floor(6*(j-42));
			el.style.backgroundColor='rgb('+i+',255,0)';
		}
		else if (j<=128){
			var i=Math.floor(6*(j-85));
			el.style.backgroundColor='rgb(0,255,'+i+')';
		}
		else if (j<=170){
			var i=256-Math.floor(6*(j-128));
			el.style.backgroundColor='rgb(0,'+i+',255)';
		}
		else if (j<=213){
			var i=Math.floor(6*(j-170));
			el.style.backgroundColor='rgb('+i+',0,255)';
		}
		else if (j<=256){
			var i=256-Math.floor(6*(j-213));
			el.style.backgroundColor='rgb(255,0,'+i+')';
		}
		palette.gesticoul();
	},

arcenevent:function(e){
		var dde=document.documentElement;
		palette.arcenmouse(e);
		dde.addEventListener("mousemove",palette.arcenmouse, false);
		dde.addEventListener("mousedown", selecte, false);
		dde.addEventListener("mouseup",palette.arcenout, false);

	},

arcenout:function(){
		var dde=document.documentElement;
		dde.removeEventListener("mousemove",palette.arcenmouse, false);
		dde.removeEventListener("mousedown", selecte, false);
		dde.removeEventListener("mouseup",palette.arcenout, false);

	},

gesticoul:function(arg){

		var tabcode=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
		
		
		if(arguments.length==0){
			var val=document.getElementById('dv').style.backgroundColor;
		}
		else{
			var val=arg;
			document.getElementById('dv').style.backgroundColor=val
		}
		
		if(val.substr(0,1)=='#'){
			val=[parseInt(val.substr(1,2),16),parseInt(val.substr(3,2),16),parseInt(val.substr(5,2),16)];
		}
		else{
			val=val.replace(/rgb\(/gi,"");
			val=val.replace(/\)/gi,"");
			val=val.split(",");
		}
		
		var allelem=document.getElementById('fencouleur').getElementsByClassName('curscrolcoul2');
		
		
		allelem[0].style.marginLeft=parseInt(val[0])+'px';
		allelem[1].style.marginLeft=parseInt(val[1])+'px';
		allelem[2].style.marginLeft=parseInt(val[2])+'px';
		
		var valcoul='';
		for (var i=0; i<=2; i++){
			var el2=tabcode[Math.floor((val[i]/16))];
			var el=tabcode[Math.round((val[i]%16))];
			valcoul+=el2+el;
		}
		document.getElementById('fencouleur').getElementsByTagName('input')[0].value='#'+valcoul;
		document.getElementById('fencouleur').getElementsByTagName('input')[1].value=parseInt(val[0])+'.'+parseInt(val[1])+'.'+parseInt(val[2]);
		document.getElementById('boiteombre').getElementsByTagName('input')[0].value='#'+valcoul;
	}

}

//////////////////////////////
/////////////////////////////



function cccs(quoi){

	if(quoi=="couper" && document.getElementById("cadre")){
		
		paink1.cccpmem=paink1.contexte.getImageData(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);
		paink1.contexte.clearRect(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);
	}
	
	if(quoi=="copier"  && document.getElementById("cadre")){
		
		paink1.cccpmem=paink1.contexte.getImageData(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);
	}
	
	if(quoi=="supp"  && document.getElementById("cadre")){
		
		paink1.contexte.clearRect(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);		
	}
	refanul();
}

function colle(){

	var gema = document.createElement("canvas");
	gema.id="coller"
	gema.height=paink1.cccpmem.height;
	gema.width=paink1.cccpmem.width;
	gema.style.position='absolute';
	gema.addEventListener("mousedown", kdrag.sp, false);
	gema.getContext('2d').putImageData(paink1.cccpmem,0,0);
	paink1.contpaink.appendChild(gema);
	paink1.elem.parentNode.addEventListener("click", fincolle, false);
	outcadre();

}

function fincolle(e){

	var decx=document.getElementById("coller").offsetLeft-paink1.elem.offsetLeft;
	var decy=document.getElementById("coller").offsetTop-paink1.elem.offsetTop;
	paink1.contexte.putImageData(paink1.cccpmem,decx,decy);
	paink1.elem.parentNode.removeEventListener("click", fincolle, false);
	document.getElementById("coller").parentNode.removeChild(document.getElementById("coller"));
	refanul();
}

function voir_reg(e){

var lui=e.currentTarget;
if(lui.nextSibling.nextSibling.style.display=='block'){
lui.nextSibling.nextSibling.style.display='none';
return false;
}

var all=lui.parentNode.getElementsByTagName('ul');

for(var i = 0; i < all.length; i++){
all[i].style.display='none';
}
lui.nextSibling.nextSibling.style.display='block';

}


function evtrait(e){

	e.currentTarget.addEventListener("mousemove",trait, false);
	e.currentTarget.addEventListener("mouseup",evfin, false);
	paink1.elem.getContext('2d').beginPath();
}

function trait(e){
	
	var ctx = paink1.contexte;
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var X =e.clientX + dde.scrollLeft;
	var Y =e.clientY + dde.scrollTop;
	var dcx=X-paink1.contpaink.offsetLeft;
	var dcy=Y-paink1.contpaink.offsetTop;
	ctx.shadowOffsetX =0;
	ctx.shadowOffsetY =0;
	ctx.shadowBlur =0;
	ctx.lineTo(dcx, dcy);
	ctx.stroke();
}

function evfin(e){

	e.currentTarget.removeEventListener("mousemove",trait, false);
	e.currentTarget.removeEventListener("mouseup",evfin, false);
	refanul();
}


function couleur(lui){

	var coucoul=window.getComputedStyle(lui,null).getPropertyValue('background-color');
	paink1.contexte.fillStyle = coucoul;
	paink1.contexte.strokeStyle = coucoul;
	document.getElementById('petpi').style.backgroundColor = coucoul;
	palette.gesticoul(coucoul)
}

function couleur2(lui){

	var coucoul=document.getElementById('leinput').value;
	paink1.contexte.fillStyle = coucoul;
	paink1.contexte.strokeStyle = coucoul;
	document.getElementById('petpi').style.backgroundColor = coucoul;
}


function traitaille(lui){

	paink1.contexte.lineWidth = lui.value;
	paink1.contexte.lineCap='round';
}

function nb() {
	
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	var idata = paink1.contexte.getImageData( paink1.gauche, paink1.haut, largeur, hauteur);
	var data = idata.data;
	for(var i = 0; i < data.length; i+=4){
		var r = data[i];
		var g = data[i+1];
		var b = data[i+2];
		var noireblanc = (r+g+b)/3;
		data[i] = noireblanc;
		data[i+1] = noireblanc;
		data[i+2] = noireblanc;
	}
	idata.data = data;
	paink1.contexte.putImageData(idata, paink1.gauche, paink1.haut);
	refanul();
}


function gomme(){

	paink1.contexte.fillStyle = 'rgba(255,255,255,0.5)';
	paink1.contexte.strokeStyle = 'rgba(255,255,255,0.5)';
}


function lumiaire(valintermed){

	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur;
	
	var idata = paink1.contexte.getImageData(paink1.gauche, paink1.haut, largeur, hauteur);
	var data = idata.data;
	
	for(var i = 0; i < data.length; i+=4){
		data[i] = paink1.refintermed[i]+valintermed;
		data[i+1] = paink1.refintermed[i+1]+valintermed;
		data[i+2] = paink1.refintermed[i+2]+valintermed;
	}
	idata.data = data;
	paink1.contexte.putImageData(idata, paink1.gauche, paink1.haut);
}

function lume(){
	
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur;
	paink1.refintermed=paink1.contexte.getImageData(paink1.gauche, paink1.haut, largeur, hauteur).data;
	var el=document.getElementById('lumi');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		refanul();
		el.style.display='none';
	}	
}


function coulplus(valintermed,couleur){

	var idata = paink1.contexte.getImageData( paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
	var data = idata.data;
	
	for(var i = 0; i < data.length; i+=4){
		
		if(couleur=='rouge'){
			data[i] = paink1.refintermed[i]+valintermed;
		}
		if(couleur=='vert'){
			data[i+1] = paink1.refintermed[i+1]+valintermed;
		}
		if(couleur=='bleu'){
			data[i+2] = paink1.refintermed[i+2]+valintermed;
		}
	}
	idata.data = data;
	paink1.contexte.putImageData(idata, paink1.gauche, paink1.haut);
}

function coule(){

	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur;
	paink1.refintermed=paink1.contexte.getImageData(paink1.gauche, paink1.haut, largeur, hauteur).data;
	var el=document.getElementById('fencolorimetre');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		refanul();
		el.style.display='none';
	}	
}

function recadre(){	

	var ctx=paink1.contexte;
	
	var donneimage = ctx.getImageData( paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
	
	ctx.clearRect(0, 0, paink1.largeur, paink1.hauteur);
	paink1.elem.width=paink1.largeur;
	paink1.elem.height=paink1.hauteur;
	paink1.contpaink.style.width=paink1.largeur+"px";
	paink1.contpaink.style.height=paink1.hauteur+"px";
	outcadre();
	ctx.putImageData(donneimage, 0, 0);
	refanul();
}


function pipette(e){

	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var X =e.clientX + dde.scrollLeft-paink1.contpaink.offsetLeft;
	var Y =e.clientY + dde.scrollTop-paink1.contpaink.offsetTop;
	var idata = paink1.contexte.getImageData(X,Y,1,1);
	var data = idata.data;
	var rg='rgb('+data[0]+','+data[1]+','+data[2]+')';
	document.getElementById('petpi').style.backgroundColor=rg;
	palette.gesticoul(rg);
	paink1.elem.getContext('2d').fillStyle = rg;
	paink1.elem.getContext('2d').strokeStyle = rg;
}


function texte(e){

	var dde=(navigator.vendor) ? document.body : document.documentElement;
	omt =e.clientY + dde.scrollTop;
	oml =e.clientX + dde.scrollLeft;
	
	if(document.getElementById('texte')==null){
		
		var cd=document.createElement('canvas');
		cd.setAttribute("id",'texte');
		cd.style.position='absolute';
		cd.style.left=50+"px";
		cd.style.top=50+"px";
		cd.style.zIndex=kdrag.ttb.length;
		cd.style.cursor='move';
		cd.style.borderStyle='solid';
		cd.style.borderSize=1+'px';
		cd.addEventListener("mousedown",kdrag.sp, false);
		document.body.appendChild(cd);
		
		cd=document.getElementById('texte').getContext('2d');
				
		cd.font = "20pt Arial";
		
		var mesure = cd.measureText("texte");
		
		document.getElementById('texte').height=30;
		document.getElementById('texte').width=mesure.width;
		cd.textBaseline="top";
		cd.font = "20pt Arial";
		cd.fillText("texte", 0, 0);
	}
	
	var el=document.getElementById('xetes');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		el.style.display='none';
	}	
	
}

function chtxt(){

	var cd=document.getElementById('texte').getContext('2d');
	var le_texte=document.getElementById('xetes').getElementsByTagName('textarea')[0].value;
	var la_police=document.getElementById('xetes').getElementsByTagName('select')[0].value;
	var largeur=document.getElementById('texte').width;
	var hauteur=document.getElementById('texte').height;
	
	cd.clearRect(0,0,largeur,hauteur);
	cd.font = paink1.taille+"pt "+la_police;
	var mesure = cd.measureText(le_texte);
	document.getElementById('texte').width=mesure.width;
	document.getElementById('texte').height=paink1.taille+10;
	cd.textBaseline="top";
	cd.font = paink1.taille+"pt "+la_police;
	
	if(document.getElementById('xetes').getElementsByTagName('input')[0].checked){
	cd.fillText(le_texte, 0, 0);
	}
	else{
	cd.strokeText(le_texte, 0, 0);
	}
}

function textefin(){

	var lui=document.getElementById('texte');
	
	var le_texte=document.getElementById('xetes').getElementsByTagName('textarea')[0].value;
	var la_police=document.getElementById('xetes').getElementsByTagName('select')[0].value;
	var posx=lui.offsetLeft-paink1.contpaink.offsetLeft;
	var posy=lui.offsetTop-paink1.contpaink.offsetTop;
	var ctx = paink1.contexte;
	
	ctx.font = paink1.taille+"pt "+la_police;
	ctx.textBaseline="top";
	
	if(document.getElementById('xetes').getElementsByTagName('input')[0].checked){
	ctx.fillText(le_texte, posx, posy);
	}
	else{
	ctx.strokeText(le_texte, posx, posy);
	}
		
	document.body.removeChild(lui);
	ctx.shadowOffsetX = 0;
	ctx.shadowOffsetY = 0;
	ctx.shadowBlur = 0;
	document.getElementById('xetes').style.display='none';
	refanul();
}

function ombre(){

	var el=document.getElementById('boiteombre');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
		var ctx = document.getElementById('omb').getContext('2d');
		ctx.fillRect(25,25,50,50);
	}
	else{
		el.style.display='none';
	}	
}

function formombre(valeur){
	
	var el=document.getElementById('boiteombre').getElementsByTagName('input');
	var ctx = document.getElementById('omb').getContext('2d');
	ctx.clearRect(0,0,100,100);
	
	if(kscroll.cible=='ombrex'){
		ctx.shadowOffsetX = valeur;
	}
	else if(kscroll.cible=='ombrey'){
		ctx.shadowOffsetY = valeur;
	}
	else if(kscroll.cible=='ombref'){
		ctx.shadowBlur = valeur/2;
	}
	ctx.shadowColor = el[0].value=='' ? "#000000" : el[0].value;
	ctx.fillRect(25,25,50,50);

}

function validombre(){

	var el=document.getElementById('boiteombre').getElementsByTagName('input');
	var cty = document.getElementById('omb').getContext('2d');
	var ctx = paink1.contexte;
	ctx.shadowOffsetX = cty.shadowOffsetX;
	ctx.shadowOffsetY = cty.shadowOffsetY;
	ctx.shadowBlur = cty.shadowBlur;
	ctx.shadowColor = el[0].value=='' ? "#000000" : el[0].value;
	document.getElementById('boiteombre').style.display='none';
}

function miroir(sens){

	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	var gauche=paink1.gauche;
	var haut=paink1.haut;
	
	var idata = ctx.getImageData(gauche, haut, largeur, hauteur);
	var data = idata.data;
	var idata2 = ctx.getImageData(gauche, haut, largeur, hauteur);
	var data2 = idata2.data;
	
	if(sens=="h"){
		for(var i = 0; i < hauteur ; i++) {
			for(var j = 0; j < largeur*4; j++){
				data2[j+(i*largeur*4)] = data[(largeur*4*(hauteur-i-1))+j];
			}
		}
	}
	
	if(sens=="v"){
		for(var i = 0; i < hauteur ; i++) {
			for(var j = 0; j < largeur*4 ; j+=4){
				data2[j+(i*largeur*4)] = data[(largeur*4)-j-4+(i*largeur*4)];
				data2[j+(i*largeur*4)+1] = data[(largeur*4)-j-3+(i*largeur*4)];
				data2[j+(i*largeur*4)+2] = data[(largeur*4)-j-2+(i*largeur*4)];
				data2[j+(i*largeur*4)+3] = data[(largeur*4)-j-1+(i*largeur*4)];
			}
		}
	}
	idata2.data = data2;
	ctx.clearRect(gauche, haut, largeur, hauteur);
	ctx.putImageData(idata2, gauche, haut);
	refanul();
}


function rotata(sens){

	outcadre();

	var ctx=paink1.contexte;
	var base64 = paink1.elem.toDataURL("image/png"); 

	var widt=paink1.elem.height;
	paink1.elem.height=paink1.elem.width;
	paink1.hauteur=paink1.elem.width;
	paink1.elem.width=widt;
	paink1.largeur=widt;
	paink1.contpaink.style.height=paink1.elem.height+'px';
	paink1.contpaink.style.width=paink1.elem.width+'px';
	
	
	var ima=new Image();
	ima.src=base64;
	ima.onload=function(){
		ctx.save();
		ctx.rotate(90 * (Math.PI / 180));
		ctx.translate(0,-(paink1.largeur));
		ctx.drawImage(ima, 0, 0);
		refanul();
		ctx.restore();
	}
	
}

function pot(e){

	var context = paink1.contexte;
	var canvasWidth = paink1.elem.width;
	var canvasHeight = paink1.elem.height;
	var colorLayer=context.getImageData(0, 0, canvasWidth, canvasHeight);
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var X =e.clientX + dde.scrollLeft;
	var Y =e.clientY + dde.scrollTop;
	var startX = X-paink1.contpaink.offsetLeft;
	var startY = Y-paink1.contpaink.offsetTop;
	var idata = context.getImageData(startX,startY,1,1);
	var data = idata.data;
	var startR = data[0];
	var startG = data[1];
	var startB = data[2];
	
	var val=document.getElementById('petpi').style.backgroundColor;
	if(val.substr(0,1)=='#'){
		val=[parseInt(val.substr(1,2),16),parseInt(val.substr(3,2),16),parseInt(val.substr(5,2),16)];
	}
	else{
		val=val.replace(/rgb\(/gi,"");
		val=val.replace(/\)/gi,"");
		val=val.split(",");
	}
	
	if(startR == val[0] && startG == val[1] && startB == val[2]){
		return false;
	}

	
	pixelStack = [[startX, startY]];

	while(pixelStack.length)
	{
		var newPos, x, y, pixelPos, reachLeft, reachRight;
		newPos = pixelStack.pop();
		x = newPos[0];
		y = newPos[1];

		pixelPos = (y*canvasWidth + x) * 4;
		while(y-- >= 0 && matchStartColor(pixelPos))
		{
			pixelPos -= canvasWidth * 4;
		}
		pixelPos += canvasWidth * 4;
		++y;
		reachLeft = false;
		reachRight = false;
		while(y++ < canvasHeight-1 && matchStartColor(pixelPos))
		{
			colorPixel(pixelPos);

			if(x > 0)
			{
				if(matchStartColor(pixelPos - 4))
				{
					if(!reachLeft){
						pixelStack.push([x - 1, y]);
						reachLeft = true;
					}
				}
				else if(reachLeft)
				{
					reachLeft = false;
				}
			}
			
			if(x < canvasWidth-1)
			{
				if(matchStartColor(pixelPos + 4))
				{
					if(!reachRight)
					{
						pixelStack.push([x + 1, y]);
						reachRight = true;
					}
				}
				else if(reachRight)
				{
					reachRight = false;
				}
			}
			
			pixelPos += canvasWidth * 4;
		}
	}
	context.putImageData(colorLayer, 0, 0);

	function matchStartColor(pixelPos){

		var r = colorLayer.data[pixelPos];
		var g = colorLayer.data[pixelPos+1];
		var b = colorLayer.data[pixelPos+2];

		return (r == startR && g == startG && b == startB);
	}

	function colorPixel(pixelPos){

		colorLayer.data[pixelPos] = val[0];
		colorLayer.data[pixelPos+1] = val[1];
		colorLayer.data[pixelPos+2] = val[2];
		colorLayer.data[pixelPos+3] = 255;
	}
	refanul();
}

function redim(){

	outcadre();

	var haut = document.getElementById('redimh').value;
	var large = document.getElementById('rediml').value;
	
	if(isNaN(haut) || isNaN(large)){
		return false;
	}
	
	var sca1= (haut/paink1.hauteur).toFixed(2);
	var sca2= (large/paink1.largeur).toFixed(2);
	
	var ctx=paink1.contexte;
	var base64 = paink1.elem.toDataURL("image/png");
	ctx.clearRect(0, 0, paink1.largeur, paink1.hauteur);
	
	paink1.elem.height=haut;
	paink1.elem.width=large;
	paink1.contpaink.style.width=large+"px";
	paink1.contpaink.style.height=haut+"px";
	paink1.hauteur=haut;
	paink1.largeur=large;

	var ima=new Image();
	ima.src=base64;
	ima.onload=function(){
		ctx.save();
		ctx.scale(sca2, sca1);
		ctx.drawImage(ima, 0, 0);
		ctx.restore();
		refanul();
		vuredim();
	}
}

function ratio(lui){

	if(document.getElementById('proportion').checked){

		if(lui.id=='redimh'){

			var ratio=	paink1.elem.width/paink1.elem.height;

			var haut = document.getElementById('redimh').value;

			if(isNaN(haut)){
				return false;
			}

			document.getElementById('rediml').value=Math.round(haut*ratio);
		}

		else{
			var ratio=	paink1.elem.height/paink1.elem.width;

			var large = document.getElementById('rediml').value;

			if(isNaN(large)){
				return false;
			}

			document.getElementById('redimh').value=Math.round(large*ratio);
		}
	}
}

function vuredim(){

	var el=document.getElementById('fendimension');
	var elvaleur=el.getElementsByTagName('input');
	
	elvaleur[0].value=paink1.elem.height;
	elvaleur[1].value=paink1.elem.width;
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		el.style.display='none';
	}	
}


function initzdt(){

	var el=document.getElementById('fenzdt');
	var elvaleur=el.getElementsByTagName('input');
	
	elvaleur[4].value=paink1.elem.height;
	elvaleur[5].value=paink1.elem.width;
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		el.style.display='none';
	}	
}

function zdt(){

	var el=document.getElementById('fenzdt');
	var elvaleur=el.getElementsByTagName('input');
	var hauteur=elvaleur[4].value;
	var largeur=elvaleur[5].value;
	
	if(elvaleur[0].checked && elvaleur[3].checked){
		var haut=(hauteur-paink1.elem.height)/2;
	}	
	else if(elvaleur[0].checked && !elvaleur[3].checked){
		var haut=(hauteur-paink1.elem.height)
	}
	else if(!elvaleur[0].checked && elvaleur[3].checked){
		var haut=0;
	}
	else{
		var haut=(hauteur-paink1.elem.height)/2;
	}
	
	if(elvaleur[1].checked && elvaleur[2].checked){
		var gauche=(largeur-paink1.elem.width)/2;
	}	
	else if(elvaleur[1].checked && !elvaleur[2].checked){
		var gauche=(largeur-paink1.elem.width);
	}
	else if(!elvaleur[1].checked && elvaleur[2].checked){
		var gauche=0;
	}
	else{
		var gauche=(largeur-paink1.elem.width)/2;
	}
	
	var ctx=paink1.contexte;
	var idata = ctx.getImageData(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);
	paink1.elem.height=hauteur;
	paink1.contpaink.style.height=hauteur+"px";
	paink1.hauteur=hauteur;
	paink1.elem.width=largeur;
	paink1.contpaink.style.width=largeur+"px";
	paink1.largeur=largeur;
	var coucoul=document.getElementById('petpi').style.backgroundColor;
	paink1.contexte.fillStyle = coucoul;
	paink1.contexte.strokeStyle = coucoul;
	ctx.fillRect( 0, 0,largeur, hauteur)
	ctx.putImageData(idata, gauche, haut);
	refanul();
	initzdt()
}


function inversion(){
	
		var idata = paink1.contexte.getImageData(paink1.gauche,paink1.haut,paink1.largeur,paink1.hauteur);
	    var data = idata.data;
	    for (var i = 0; i<data.length; i += 4) {
	        data[i] = 255 - data[i];
	        data[i+1] = 255 - data[i+1];
	        data[i+2] = 255 - data[i+2];
    }
 
  paink1.contexte.putImageData(idata, paink1.gauche, paink1.haut);
  refanul();
}


function init_floue(){

var el=document.getElementById('floue');

if(el.style.display=='none' || el.style.display==''){
		paink1.refintermed=paink1.contexte.getImageData(paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
		el.style.display='block';
	}
	else{
		refanul();
		el.style.display='none';
	}	
}


function initpixeli(){


var el=document.getElementById('pixi');

if(el.style.display=='none' || el.style.display==''){
	
	paink1.refintermed=paink1.contexte.getImageData(paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur).data;
		el.style.display='block';
	}
	else{
		refanul();
		el.style.display='none';
	}	
	}

function pixeliser(pixelation){
	
		if (pixelation < 1) {
		return false 
	}
	
	var idata2 = paink1.contexte.getImageData(paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
	var data=paink1.refintermed;
	var data2 = idata2.data;
	
	for (var y = 0; y < paink1.hauteur; y += pixelation) {
		for (var x = 0; x < paink1.largeur; x += pixelation) {
			var red = data[((paink1.largeur * y) + x) * 4];
			var green = data[((paink1.largeur * y) + x) * 4 + 1];
			var blue = data[((paink1.largeur * y) + x) * 4 + 2];
			
			for (var n = 0; n < pixelation; n++) {
				for (var m = 0; m < pixelation; m++) {
					if (x + m < paink1.largeur) {
						data2[((paink1.largeur * (y + n)) + (x + m)) * 4] = red;
						data2[((paink1.largeur * (y + n)) + (x + m)) * 4 + 1] = green;
						data2[((paink1.largeur * (y + n)) + (x + m)) * 4 + 2] = blue;
					}
				}
			}
		}
	}
	
	paink1.contexte.putImageData(idata2, paink1.gauche, paink1.haut);
}


function initboss(){

var el=document.getElementById('relif');

if(el.style.display=='none' || el.style.display==''){
		paink1.refintermed=paink1.contexte.getImageData(paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
		el.style.display='block';
	}
	else{
		refanul();
		el.style.display='none';
	}	
}



function initdessin(){

var el=document.getElementById('dess');

if(el.style.display=='none' || el.style.display==''){
		paink1.refintermed=paink1.contexte.getImageData(paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
		el.style.display='block';
	}
	else{
		refanul();
		el.style.display='none';
	}	
}

function dessin(fac){


if(typeof this.dessin1 == 'undefined'){
		this.dessin1 = 0;
		this.dessin2 = 0;
		}
		if(kscroll.cible == 'dessin1'){
		this.dessin1 = Math.round(fac*255)*3;
		}
		else if(kscroll.cible == 'dessin2'){
		this.dessin2 = Math.round(fac*255);
		}
	
				
	var idata = paink1.contexte.getImageData(paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
	var data = idata.data;
	var data2 = paink1.refintermed.data;

for(var i = 0; i < data.length; i+=4) {
		var r = data2[i];
		var g = data2[i+1];
		var b = data2[i+2];
		
		if ((g + r + b ) > this.dessin1){
     	data[i]=250;
		data[i+1]=250;
		data[i+2]=250;
		}
		else{
		data[i]=(g + r + b)/3;
		data[i+1]=(g + r + b)/3;
		data[i+2]=(g + r + b)/3;
		}
		
		if (data2[i] > this.dessin2 || data2[i+1] >this.dessin2 || data2[i+2] >this.dessin2){
		data[i]= 250 
		data[i+1]=250
		data[i+2]=250 
		}
		
	}
	
paink1.contexte.putImageData(idata, paink1.gauche, paink1.haut);
}




function init(){
	paink1=new paink();
	kdrag.init_drag();
	painkcentre();
}
onload=init
</script>
</head>
<body>
	<div id="page" align="center">
		<div id="toppage" align="center">
			<div id="date">
				<div class="smalltext" style="padding: 13px;">
					<strong>23 janvier 2012</strong>
				</div>
			</div>
			<div id="topbar">
				<div align="right" style="padding: 12px;" class="smallwhitetext">
					<a href="accueil.html">Accueil</a> | | <a href="#">Nous
						Contacter</a>
				</div>
			</div>
		</div>
		<div id="header" align="center">
			<div class="titletext" id="logo">
				<div class="logotext" style="margin: 30px">
					Biblio<span class="orangelogotext">C</span>D
				</div>
			</div>
			<div id="pagetitle">
				<div id="title" class="titletext" align="right">Bienvenue sur
					Biblio CD</div>
			</div>
		</div>
		<!-- Contenue -->
		<div id="content" align="center">
			<div id="menu" align="right">
				<div align="right" style="width: 189px; height: 8px;">
					<img src="images/mnu_topshadow.gif" width="189" height="8"
						alt="mnutopshadow" />
				</div>
				<div align="right" style="width: 189px; height: 8px;">
					<img src="images/mnu_bottomshadow.gif" width="189" height="8"
						alt="mnubottomshadow" />
				</div>
			</div>
<div class="dvcanvas">
<canvas id="cvs" width="550" height="350" onmousedown='evtrait(event)'ondrop="drop(event)" ondragover="Dragov(event)"></canvas>
</div>

<div class="arriere_plans" style="height:400px;width:100%">
</div>

<div>

</div>



<div id='xetes' class="fentexte">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>texte</span>
</div>

texte :
<textarea onchange='chtxt()' onkeyup='chtxt()'></textarea>
<br>
police :
<select onchange='chtxt()'>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Times">Times</option>
<option value="Serif">serif</option>
<option value="Verdana">Verdana</option>
<option value="Courier New">Courier New</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Tahoma">Tahoma</option>
<option value="Impact">Impact</option>
</select>
<br>
taille
<div class="scrolltexte" onmousedown='kscroll.ajoutevent(event,"texte")'>
<div class="curtexte"></div>
</div>
<br>
<button onclick='textefin()'>valider</button><button onclick='ombre()'>ombre</button>

<div class='police_p'>police pleine
<input type='checkbox' checked='checked' onclick='chtxt()'/>
</div>

</div>




<div id='boiteombre' class="fenombre">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>ombre</span>
</div>

<div class="divombre">
<canvas id="omb" height="100" width="100"></canvas>
</div>

ombre x
<div class="scrollombre" onmousedown='kscroll.ajoutevent(event,"ombrex")'>
<div class="ctcurombre"></div>
</div>
<br>
ombre y
<div class="scrollombre" onmousedown='kscroll.ajoutevent(event,"ombrey")'>
<div class="ctcurombre"></div>
</div>
<br>
floue....
<div class="scrollombre" onmousedown='kscroll.ajoutevent(event,"ombref")'>
<div class="curombre"></div>
</div>
<br>
couleur
<input type="color" onchange='formombre()' id="coulombre"'></input>
<br>
<button onclick='validombre()'>valider</button>
</div>




<div id='lumi' class="fenlumi">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>contraste</span>
</div>

<div class="scrollumi" onmousedown='kscroll.ajoutevent(event,"lumiaire")'>
<div class="curlumi"></div>
</div>

<br>
<button onclick='lume()'>valider</button>
</div>




<div id='fencolorimetre'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>couleur</span>
</div>

<div class="scrollcoul" onmousedown='kscroll.ajoutevent(event,"rouge")'>
<div class="curscrolcoul"></div>
</div>

<div class="scrollcoul" onmousedown='kscroll.ajoutevent(event,"vert")'>
<div class="curscrolcoul"></div>
</div>

<div class="scrollcoul" onmousedown='kscroll.ajoutevent(event,"bleu")'>
<div class="curscrolcoul"></div>
</div>
<br>
<button onclick='coule()'>valider</button>
</div>




<div class='fenedition'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>edition</span>
</div>

<div class="couledition">
<div class='anuref'>
<img src='res/annul.png' title="annuler" onclick='annuler()'/>
</div>

<div class='anuref'>
<img src='res/refait.png'  title="refaire" onclick='refaire()'/>
</div>

<div class='anuref'>
<img src='res/sauver.png' title="sauver" onclick='sauver()'/>
</div>

<div class='anuref'>
<img src='res/nouveau.png' title="nouveau" onclick='raz()'/>
</div>

<div class="contcouvrir">
<input type='file' multiple='multiple' id='fileinput' class="couvrir"onchange='drop()'/>
<input type='button' value='Load' title="ouvrir" onclick='drop();'>
</div>

<div class='anuref'>
<img src='res/couper.png' title="couper" onclick='cccs("couper")'/>
</div>

<div class='anuref'>
<img src='res/copier.png' title="copier" onclick='cccs("copier")'/>
</div>

<div class='anuref'>
<img src='res/coller.png' title="coller" onclick='colle()'/>
</div>

<div class='anuref'>
<img src='res/supprimer.png' title="supprimer" onclick='cccs("supp")'/>
</div>

<select onchange='traitaille(this)' title="police">
<option value=1>1</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=6>6</option>
<option value=8>8</option>
<option value=10>10</option>
<option value=14>14</option>
<option value=20>20</option>
<option value=40>40</option>
<option value=100>100</option>
</select>

<div id='petpi' onclick='couleur(this)'></div>

</div>
</div>





<div class='fencouleur' id='fencouleur'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>couleur</span>
</div>

<div class="coulcoul">
<div class='coul'onclick='couleur(this)'></div>
<div class='coul2'onclick='couleur(this)'></div>
<div class='coul3'onclick='couleur(this)'></div>
<div class='coul4'onclick='couleur(this)'></div>
<div class='coul5'onclick='couleur(this)'></div>
<div class='coul6'onclick='couleur(this)'></div>
<div class='coul7'onclick='couleur(this)'></div>
<div class='coul8'onclick='couleur(this)'></div>
<div class='coul9'onclick='couleur(this)'></div>
<div class='coul10'onclick='couleur(this)'></div>
<div class='coul11'onclick='couleur(this)'></div>
<div class='coul12'onclick='couleur(this)'></div>
<div class='coul13'onclick='couleur(this)'></div>
</div>
<br>
r
<div class="scrollcoul" onmousedown='kscroll.ajoutevent(event,"prouge")'>
<div class="curscrolcoul2"></div>
</div>

v
<div class="scrollcoul" onmousedown='kscroll.ajoutevent(event,"pvert")'>
<div class="curscrolcoul2"></div>
</div>

b
<div class="scrollcoul" onmousedown='kscroll.ajoutevent(event,"pbleu")'>
<div class="curscrolcoul2"></div>
</div>

<img src='res/arc.jpg' class="arccoul" id="arccoul" onmousedown='palette.arcenevent(event)'></img>
<div id='dv'></div>

<button onclick='couleur2(this)'>valider</button>
<input type='texte' id='leinput' value='#000000'>
<input type='texte' id='leinput2' value='0.0.0'>

</div>




<div class='fenoutils'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>outils</span>
</div>

<div class="divoutils">

<div class='outils'>
<img src='res/pipette.png' title="pipette" onclick='dispatche("pipette")'/>
</div>
<div class='outils'>
<img src='res/cadre.png' title="rectangle de selection" onclick='dispatche("cadre")'/>
</div>
<div class='outils'>
<img src='res/crayon.png' title="crayon" onclick='dispatche("trait")'/>
</div>

<div class='outils'>
<img src='res/gomme.png' title="gomme" onclick='dispatche("gomme")'/>
</div>

<div class='outils'>
<img src='res/pot.png' title="pot de peinture" onclick='dispatche("pot")'/>
</div>

<div class='outils'>
<img src='res/txte.png' title="pot de peinture" onclick='texte(event)'/>
</div>
</div>
</div>




<div class='fenreglage'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>reglage & effet</span>
</div>

<div class="divreglage">

<div onclick='voir_reg(event)'>image</div>
<ul>
<li onclick='recadre()'>recadre</li>
<li onclick='miroir("v")'>miroir v</li>
<li onclick='miroir("h")'>miroir h</li>
<li onclick='rotata()'>rotation</li>
<li onclick='vuredim()'>dimension</li>
<li onclick='initzdt()'>zone de travail</li>
</ul>


<div onclick='voir_reg(event)'>reglage</div>
<ul>
<li onclick='lume()'>luminosité</li>
<li onclick='coule()'>couleur</li>
<li onclick='ombre()'>ombre</li>
<li onclick='nb()'>n & b</li>
</ul>


<div onclick='voir_reg(event)'>effet</div>
<ul>
<li onclick='init_floue()'>floue</li>
<li onclick='initboss()'>relief</li>
<li onclick='initpixeli()'>pixeliser</li>
<li onclick='initdessin()'>decolorer</li>
<li onclick='tableau()'>Sharpen</li>
<li onclick='inversion()'>inverser</li>
</ul>

</div>
</div>




<div id='fendimension' class='fendimension'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>dimension</span>
</div>
hauteur:<input type='texte' id='redimh' onkeyup='ratio(this)'>
<br>
largeur:<input type='texte' id='rediml' onkeyup='ratio(this)'>
<br>
<button onclick='redim()'>valider</button>

<div class='dimproport'>
conserver proportions
<input id='proportion' type='checkbox' checked='checked'/>
</div>

</div>




<div id='floue' class="fenfloue">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>floue</span>
</div>

<div class="scrolfloue" onmousedown='kscroll.ajoutevent(event,"floue")'>
<div class="curfloue"></div>
</div>
<br>
<button onclick='init_floue()'>valider</button>
</div>




<div class='fenzdt' id='fenzdt'>

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>zone de travail</span>
</div>

<div class='zdtgen'>

<input type='checkbox' checked='checked' class='zdt1'>

<div class='zdtmi'>

<input type='checkbox' checked='checked' class='zdt2'>
<div class='zdtelem'></div>
<input type='checkbox' checked='checked' class='zdt3'>

</div>

<input type='checkbox' checked='checked' class='zdt4'>

</div>

hauteur:<input type='texte' id='zdth'>
<br>
largeur:<input type='texte' id='zdtl'>
<br>
<button onclick='zdt()'>valider</button>
</div>



<div id='pixi' class="fenpixi">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>pixeliser</span>
</div>

<div class="scrolfloue" onmousedown='kscroll.ajoutevent(event,"pixi")'>
<div class="curfloue"></div>
</div>
<br>
<button onclick='initpixeli()'>valider</button>
</div>





<div id='relif' class="fenrelif">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>relief</span>
</div>

<div class="scrolfloue" onmousedown='kscroll.ajoutevent(event,"bossautre")'>
<div class="curfloue"></div>
</div>

<div class="scrolfloue" onmousedown='kscroll.ajoutevent(event,"bossgris")'>
<div class="curfloue"></div>
</div>

Direction:
<select id="value-direction" class="demo-select" onchange="boss()">
<option value="topleft">Top left</option>

<option value="top">Top</option>
<option value="topright">Top right</option>
<option value="right">Right</option>
<option value="bottomright">Bottom right</option>
<option value="bottom">Bottom</option>
<option value="bottomleft">Bottom left</option>
<option value="left">Left</option>
</select><br/>

<div>couleurs <input type="checkbox" onclick="boss()" class="demo-checkbox"/></div>

<button onclick='initboss()'>valider</button>
</div>



<div id='dess' class="fendecol">

<div onmousedown='kdrag.sp(event,"parent")' class="cdrag">
<span>decolorer</span>
</div>

<div class="scrolfloue" onmousedown='kscroll.ajoutevent(event,"dessin1")'>
<div class="curfloue"></div>
</div>

<div class="scrolfloue" onmousedown='kscroll.ajoutevent(event,"dessin2")'>
<div class="curfloue"></div>
</div>

<br>
<button onclick='initdessin()'>valider</button>
</div>

</body>
</html>
